import React, { useState } from "react"
import { useDraggable, useDroppable, DndContext } from '@dnd-kit/core';
import "./fujian.css"
import { CSS } from '@dnd-kit/utilities';

// 可重用的可放置容器的列表
function Droppable(props) {
    const { setNodeRef } = useDroppable({
        id: props.id,
    });

    return (
        <div ref={setNodeRef}>
            {props.children}
        </div>
    );
}
const commonStyle = {
    cursor: 'move',
    transition: 'unset', // Prevent element from shaking after drag
};

const Fujian = () => {
    const droppables = ['1', '2', '3', '4'];

    const { setNodeRef: setFirstDroppableRef } = useDroppable({
        id: 'droppable-1',
    });
    const { setNodeRef: setsecondDroppableRef } = useDroppable({
        id: 'droppable-2',
    });

    const { attributes, listeners, setNodeRef, transform } = useDraggable({
        id: 'unique',
    });
    const style = transform
        ? {
            ...commonStyle,
            transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
            transition: isDragging ? 'unset' : transition, // Improve performance/visual effect when dragging
        }
        : commonStyle;



    return (
        <>
            <DndContext>
                <div className="flex">
                    <div ref={setFirstDroppableRef}>
                        <div className="man"></div>
                    </div>
                    <div ref={setsecondDroppableRef}>
                        <div ref={setNodeRef}>
                            <div className="man">
                                <button {...listeners} {...attributes}>Drag handle 1</button>
                                <button {...listeners} {...attributes}>Drag handle 2</button>
                            </div>
                        </div>
                    </div>
                </div>
            </DndContext>

        </>
    )
}

export default Fujian